<template>
	<div class="city">
		<div class="list">
			<p>定位/附近城市</p>
			<div class="item"  @click="setCity(cityName)">{{cityName}}</div>
		</div>
		<div class="list">
			<p>热门城市</p>
			<div :class="['item',{'default':item.name==cityName}]" v-for="item in hotCity" :key="item.code" @click="setCity(item.name)">{{item.name}}</div>
		</div>
		<div class="list" v-for="(item,index) in ListCity" :key="index">
			<p>字母{{item.initial}}开头的城市</p>
			<div :class="['item',{'default':key.name==cityName}]" v-for="key in item.list" :key="key.code" @click="setCity(key.name)">{{key.name}}</div>
		</div>
	</div>
</template>

<script>
import {mapState} from 'vuex';
export default{
	name:'City',
	data(){
		return {
			hotCity:[],
			ListCity:[]
		}
	},
	created() {
		let that = this;
		this.axios.get('/api/city.json').then((res)=>{
			if(res.status == 200){
				let data = res.data.data;
				this.hotCity = data.hotCities;
				this.ListCity = data.city;
			}
		}).catch((error)=>{
			console.log(error);
		})
	},
	methods:{
		setCity(name){
			//设置城市并跳转到首页
			this.$store.commit('setCity',name);
			this.$router.push({path:'/'});
		}
	},
	computed:{
		...mapState(['cityName']),
	}
}
</script>

<style scoped>
.city{
	padding-top: 0.8rem;
	color: #8a8a8a;
	width: 95%;
	font-size: 0.3rem;
	margin: 0.2rem auto;
}	
.list{
	margin: 0.2rem 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid #a7a7a7;
	animation: .8s showItem;
}
.list:first-child{
	border-bottom:none;
}
.list p{
	width: 100%;
	line-height: 0.6rem;
	font-size: 0.36rem;
	display: block;
}
.item{
	display: inline-block;
	padding: 0 0.1rem;
	color: #3A3A3A;
	float: left;
	text-align: center;
	line-height: 0.8rem;
	margin: 0.15rem 0.08rem;
	border-radius: 0.2rem;
	background: linear-gradient(132deg,#f1f1f1,#dedede);
	width: 1.2rem;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.city .list .default{
	background: #ffd300;
	color: white;
}
@keyframes showItem{
	from{opacity: 0;}
	to{opacity: 1;}
}
</style>
